<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style rel="stylesheet">
        @import url(http://fonts.useso.com/css?family=Lato);
        .hexagon {
            width: 400px;
            height: 461.88022px;
            margin: 0 auto;
        }
        .hexagon__rotate {
            width: 100%;
            height: 100%;
            overflow: hidden;
            visibility: hidden;
            position: relative;
        }
        .hexagon__rotate--left {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
        }
        .hexagon__rotate--right {
            -webkit-transform: rotate(-120deg);
            -ms-transform: rotate(-120deg);
            transform: rotate(-120deg);
        }
        .hexagon__rotate--center {
            -webkit-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            transform: rotate(60deg);
            visibility: visible;
        }
        .hexagon__content {
            box-sizing: border-box;
            max-height: 100%;
            padding: 40.41452px 35px;
        }
        .hexagon__content i {
            display: inline-block;
            height: 24px;
            width: 0;
            box-sizing: border-box;
        }
        .hexagon__content i.l {
            float: left;
            clear: left;
        }
        .hexagon__content i.r {
            float: right;
            clear: right;
        }
        .hexagon__content i:nth-child(1),
        .hexagon__content i:nth-child(2) {
            width: 48.70348%;
        }
        .hexagon__content i:nth-child(3),
        .hexagon__content i:nth-child(4) {
            width: 35.73829%;
        }
        .hexagon__content i:nth-child(5),
        .hexagon__content i:nth-child(6) {
            width: 22.7731%;
        }
        .hexagon__content i:nth-child(7),
        .hexagon__content i:nth-child(8) {
            width: 9.80791%;
        }
        .hexagon__content i:nth-child(n+9) {
            display: none;
        }
        body {
            font-family: Lato, sans-serif;
            font-size: 16px;
            line-height: 1.5;
            text-align: justify;
            background: -webkit-linear-gradient(0deg, #ffdbd4, #ffd4ea);
            background: linear-gradient(90deg, #ffdbd4, #ffd4ea);
            margin: 2em;
        }
        h1 {
            font-size: 1em;
        }
        .hexagon__content {
            background: pink;
        }
    </style>
</head>
<body>
<div class="hexagon">
    <div class="hexagon__rotate hexagon__rotate--left">
        <div class="hexagon__rotate hexagon__rotate--right">
            <div class="hexagon__rotate hexagon__rotate--center hexagon__content"><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i>
                <i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i>
                <i
                        class="l"></i>
                <i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i><i class="l"></i><i class="r"></i>
                <p>Techbrood is a leading search engine on cutting-edge technologies and design creatives, WOW is a cloudy/virtual show stage for wonderful works from web developers and designers. Any thoughts or feedbacks, please feel free to contact
                    us via email (iefreer@hotmail.com) or qq(24739149). We also provide customized web building and searching services. This is a simple demo for displaying hexagon text shape with pure CSS3 ( transform:rotate/nth-child ).</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>